import { Button, Card, Col, Pagination, Row, Table, Tag, Tree } from 'antd'
import React, { useEffect, useState } from 'react'
import { getAllDepartmentData, getSchedulelistdata, getScheduleWorkDateListData } from '@/api/hospital/hospitallist';
import type { OnescheduleList, resAllDepartmentLists, resscheduleLists } from '@/api/hospital/hospitallist/model/hospitalListType';
import { useNavigate, useParams } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table';


export default function HospitalSchedule() {

    //声明一个可以存储所有科室的状态变量数据
    let [departments, setDepartments] = useState<resAllDepartmentLists>([]);
    //声明一个可以存储需要展开所有一级科室状态变量数据
    let [expandedKeys, setExpandedKeys] = useState<string[]>([]);
    //声明一个当前是第几页数据的状态变量
    let [current, setCurrent] = useState(1);
    //声明一个每页显示多少条记录数的状态变量
    let [pageSize, setPageSize] = useState(5);
    //声明一个可以获取总条数的状态变量
    let [total, setTotal] = useState(0);
    //声明一个可以存储对应医院的对应科室下的排班日期数据
    let [workDate, setWorkDate] = useState<OnescheduleList>([]);
    //声明一个可以存储对应医院的对应科室对应排班日期下的存储排班数据状态变量
    let [schedulelist, setSchedulelist] = useState<resscheduleLists>([]);
    //声明一个可以存储医院名称的状态字符串变量
    let [hosname, setHosname] = useState('')
    //声明可以存储选择对应的科室名称的状态字符串变量
    let [depname, setDepname] = useState('');
    //声明可以存储点击的排班日期的状态字符串变量
    let [scheduleDate, setScheduleDate] = useState('')
    //声明一个可以存储科室编号的状态字符串
    let [depcode, setDepcode] = useState('');
    //获取路由参数得到当前是哪一家医院编号
    let { id } = useParams();
    let navigate = useNavigate();
    //声明一个函数用来请求科室数据的
    const getAllDepartmentList = async () => {
        //请求对应医院下的所有科室数据的
        let result = await getAllDepartmentData()
        //在数组中每一条对象中新增禁用属性
        result = result.map(item => {
            //item是数组中的每一个对象，将每一个对象中新增一个属性，原来的属性保留
            return {
                ...item,
                //新增的属性
                disabled: true,
            };
        })
        //输出所有的科室数据
        // console.log(result);
        //更新状态数据
        setDepartments(result);
        //将所有的科室编号存入一个数组中进行状态更新
        setExpandedKeys(result.map(item => item.depcode));

        //获取第一个专科科室下的第一个二级科室的编号
        let depcode = result[0].children ? result[0].children[0].depcode : '';

        //更新状态
        setDepcode(depcode);


        //获取第一个专科科室下的第一个二级科室的名称
        let depname = result[0].children ? result[0].children[0].depname : '';

        //更新状态
        setDepname(depname);

        //调用请求对应医院的对应科室下所有的排班日期数据
        let result1 = await getScheduleWorkDateListData({ page: current, limit: pageSize, hoscode: id as string, depcode });
        //更新总条数的状态
        setTotal(result1.total);
        //更新排班日期数据的状态
        setWorkDate(result1.bookingScheduleList)
        //更新医院名称数据
        setHosname(result1.baseMap.hosname)

        //获取第一个专科科室下的第一个二级科室的第一个排班日期
        let workDate = result1.bookingScheduleList[0].workDate; // 2022-04-27

        //更新第一个排班日期状态
        setScheduleDate(workDate);

        //调用对应医院对应科室对应排班日期下的数据
        let result2 = await getSchedulelistdata({ hoscode: id as string, depcode, workDate });
        //更新排班数据状态
        setSchedulelist(result2);
    }
    //组件挂载完成之后请求对应医院下的所有科室
    useEffect(() => {
        //调用
        getAllDepartmentList();
    }, [current, pageSize]);


    //自动计算左侧菜单div的高度
    let height = document.body.getBoundingClientRect().height - 64 - 34 - 22 - 24 * 2 - 20;

    //声明选择对应科室事件函数
    let selectDeptartment = async (selectedKeys: React.Key[], e: any) => {
        // console.log('选择的key', selectedKeys)
        console.log('事件对象', e)

        //获取并更新状态 找到选择的科室名称
        setDepname(e.node.depname);

        //获取点击的科室编号
        let depcode = e.node.depcode;

        //更新点击的科室编号状态数据
        setDepcode(depcode);

        //根据点击的科室名称重新进行排班日期的请求
        let result1 = await getScheduleWorkDateListData({
            page: current,
            limit: pageSize,
            hoscode: id as string,
            depcode
        });

        //更新总条数的状态
        setTotal(result1.total);
        //更新排班日期数据的状态
        setWorkDate(result1.bookingScheduleList)
    }

    //声明事件函数，处理点击的排班日期
    let clickDate = async (date: string) => {
        //更新日期状态数据
        setScheduleDate(date);
        let result2 = await getSchedulelistdata({
            hoscode: id as string,
            depcode,
            workDate: date
        });
        //更新排班数据状态
        setSchedulelist(result2);
    }
    //表格列
    const columns: ColumnsType<any> = [
        {
            title: '序号',
            align: 'center',
            render: (a: any, b: any, index: number) => {
                return index + 1;
            }
        },
        {
            title: '职称',
            dataIndex: 'title',
        },
        {
            title: '号源时间',
            dataIndex: 'workDate',
        },
        {
            title: '可预约数',
            dataIndex: 'reservedNumber',
        },
        {
            title: '剩余预约数',
            dataIndex: 'availableNumber',
        },
        {
            title: '挂号费(元)',
            dataIndex: 'amount',
        },
        {
            title: '擅长技能',
            dataIndex: 'skill',
        }
    ];
    return (
        <Card>
            <p>选择：{hosname} / {depname} / {scheduleDate}</p>
            {/* gutter 栅格间距 */}
            <Row gutter={20}>
                {/* span 栅格所占份数 */}
                <Col span={5}>
                    <div style={{ height, border: '1px solid #ccc', overflow: 'scroll' }}>
                        {/* 树形控件 */}
                        <Tree
                            treeData={departments as []}
                            expandedKeys={expandedKeys}
                            onSelect={selectDeptartment}
                            fieldNames={{
                                title: 'depname',
                                key: 'depcode'
                            }} />
                    </div>
                </Col>
                <Col span={19}>
                    <div>
                        {
                            workDate.length > 0 ? workDate.map((item, index) => {
                                return <Tag color={item.workDate === scheduleDate ? 'green' : ''} key={index} onClick={() => clickDate(item.workDate)}>
                                    <span>{item.workDate} {item.dayOfWeek}</span><br />
                                    <span>{item.availableNumber} / {item.reservedNumber}</span>
                                </Tag>
                            }) : '暂无该科室下的排班日期数据'
                        }
                    </div>
                    {/* 间距 */}
                    <div className='h-10'></div>
                    {/* 分页 */}
                    {
                        workDate.length > 0 && <Pagination
                            total={total}
                            current={current}
                            pageSize={pageSize}
                            pageSizeOptions={[5, 10, 15, 20]}
                            showSizeChanger={true}
                            onChange={(page: number, pageSize: number) => {
                                //更新当前点击的页数以及每页显示的条数
                                setCurrent(page);
                                setPageSize(pageSize);
                            }}
                        />
                    }

                    {/* 间距 */}
                    <div className='h-10'></div>
                    {/* 表格 */}
                    {
                        workDate.length > 0 && <Table
                            dataSource={schedulelist}
                            rowKey='id'
                            columns={columns}
                            bordered
                            pagination={false} />
                    }
                    {/* 间距 */}
                    <div className='h-10'></div>
                    {/* 返回按钮 */}
                    <Button onClick={() => {
                        navigate(-1)
                    }}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
